<script setup lang="ts">
import { LockOutlined, UserOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { computed, reactive } from 'vue';
import { useRequest } from 'vue-request';

/**
 * APIs
 */
import { login } from '@/request/auth';

/**
 * Resources
 */
import LoginLogo from '@/assets/login-logo.svg';

/**
 * Types
 */
import type { RuleObject } from 'ant-design-vue/es/form';
import type { LoginData } from '@/request/auth';

/**
 * States
 */
const state = reactive({
    form: {
        phone: '',
        password: '',
    },
});

/**
 * Requests
 */
const { loading: loadingLogin, run: runLogin } = useRequest(login, {
    manual: true,
    onSuccess: ({ data }) => {
        if (data.code !== 200) {
            message.error(data.message);
            return;
        }
        window.location.href = `${import.meta.env.VITE_REDIRECT_URL}/?t=${data.result.token}`;
    },
});

/**
 * Events
 */
// 当表单完成
const onFormFinish = (value: LoginData) => {
    runLogin({
        ...value,
        loginType: 0,
    });
};

/**
 * ChildrenProps
 */
const formRules = computed<Record<string, RuleObject | RuleObject[]>>(() => ({
    phone: {
        validator: (_, value) => {
            if (value.trim() === '') {
                return Promise.reject('请输入手机号/账号');
            }

            return Promise.resolve();
        },
    },
    password: {
        validator: (_, value) => {
            if (value.trim() === '') {
                return Promise.reject('请输入密码');
            }

            return Promise.resolve();
        },
    },
}));
</script>

<template>
    <div class="login-page">
        <!-- Logo -->
        <a-space align="center" class="logo" :size="6">
            <img alt="" :src="LoginLogo" />

            <div>冒泡开发者平台</div>
        </a-space>

        <!-- Form -->
        <a-config-provider
            :theme="{
                components: {
                    Form: {
                        motionDurationSlow: '0s',
                    },
                },
            }"
        >
            <a-form
                autocomplete="off"
                class="form"
                :model="state.form"
                :rules="formRules"
                @finish="onFormFinish"
            >
                <a-typography-title class="title" :level="3">登录</a-typography-title>

                <!-- 账号 -->
                <a-form-item name="phone">
                    <a-input
                        v-model:value="state.form.phone"
                        :maxlength="100"
                        placeholder="请输入手机号/账号"
                        size="large"
                    >
                        <template #prefix>
                            <UserOutlined />
                        </template>
                    </a-input>
                </a-form-item>

                <!-- 密码 -->
                <a-form-item name="password">
                    <a-input-password
                        v-model:value="state.form.password"
                        :maxlength="20"
                        placeholder="请输入密码"
                        size="large"
                    >
                        <template #prefix>
                            <LockOutlined />
                        </template>
                    </a-input-password>
                </a-form-item>

                <!-- Submit -->
                <a-form-item>
                    <a-button
                        :block="true"
                        html-type="submit"
                        :loading="loadingLogin"
                        size="large"
                        type="primary"
                    >
                        登录
                    </a-button>
                </a-form-item>

                <!-- <div class="register">
                    还没有账号？<RouterLink to="/register">点击注册</RouterLink>
                </div> -->
            </a-form>
        </a-config-provider>
    </div>
</template>

<style scoped lang="less">
.login-page {
    height: 100vh;
    background: #f7f8fc url('@/assets/login-back.png') top center / 100% 50% no-repeat;

    .logo {
        margin: 32px;
        color: #fff;
        font-size: 20px;
        font-weight: 500;
    }

    .form {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 400px;
        padding: 30px 40px;
        background-color: #fff;
        border-radius: 2px;
        transform: translate(-50%, -50%);

        .title {
            margin-bottom: 24px;
            text-align: center;
        }

        .register {
            text-align: right;
        }
    }
}
</style>
